<template>
  <div class="w100 h100 home-container flex-column">
    <div>
      <TopContainer></TopContainer>
    </div>
    <div class="f1 w100">
      <splitpanes class="w100 h100 default-theme">
        <pane min-size="10" max-size="40" size="15">
          <LeftContainer></LeftContainer>
        </pane>
        <pane min-size="60" max-size="90" size="85">
          <div class="w100 h100 flex-column">
            <TagMain />
            <RightContainer class="f1" />
            <BottomContainer />
          </div>
        </pane>
      </splitpanes>
    </div>
  </div>
</template>

<script setup lang="ts">
import TopContainer from './topContainer/index.vue'
import LeftContainer from './leftContainer/index.vue'
import RightContainer from './rightContainer/index.vue'
import BottomContainer from './bottomContainer/index.vue'
import TagMain from './tagMain/index.vue'
import { Splitpanes, Pane } from 'splitpanes'
</script>

<style scoped lang="less">
.home-container {
  background-color: #f5f5f5;
  :deep(.splitpanes) {
    .splitpanes__splitter {
      background-color: #f5f5f5;
      border-left: none;
    }
  }
}
</style>
